﻿<!DOCTYPE html>
<html>
  <head>
    <title>单选框 Radio</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/单选框_radio/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/单选框_radio/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u5229" class="ax_default" data-label="背景">
        <div id="u5229_state0" class="panel_state" data-label="State1" style="">
          <div id="u5229_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u5230" class="ax_default" data-label="线条">
        <div id="u5230_state0" class="panel_state" data-label="State1" style="">
          <div id="u5230_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5231" class="ax_default _默认样式">
        <div id="u5231_div" class=""></div>
        <div id="u5231_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5232" class="ax_default _默认样式">
        <div id="u5232_div" class=""></div>
        <div id="u5232_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u5234" class="ax_default _默认样式">
        <img id="u5234_img" class="img " src="images/___icons/u605.png"/>
        <div id="u5234_text" class="text ">
          <p><span>Copyright © </span><a id="u5235" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5236" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="110">

        <!-- Unnamed (Rectangle) -->
        <div id="u5237" class="ax_default _默认样式">
          <div id="u5237_div" class=""></div>
          <div id="u5237_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">用于在多个备选项中选中单个状态，单选框所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。当选项少于5项时，建议使用单选框，直接将选项平铺。提供了动态及静态的元件示例，可根据需要选择使用。扩展阅读文章：</span><a id="u5238" class="link"><span style="font-family:'微软雅黑';font-weight:400;">想做好「单选框」的用户体验，这儿有10个技巧可以帮你</span></a></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u5239" class="ax_default _默认样式">
          <div id="u5239_div" class=""></div>
          <div id="u5239_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5240" class="ax_default _默认样式">
        <div id="u5240_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5241" class="ax_default _默认样式">
        <div id="u5241_div" class=""></div>
        <div id="u5241_text" class="text ">
          <p><span>静态单选框</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5242" class="ax_default" data-left="40" data-top="301" data-width="300" data-height="40">

        <!-- Unnamed (Group) -->
        <div id="u5243" class="ax_default" data-left="40" data-top="301" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5244" class="ax_default _默认样式">
            <img id="u5244_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5244_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 金斑蝶</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5245" class="ax_default" data-left="140" data-top="301" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5246" class="ax_default _默认样式">
            <img id="u5246_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5246_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 爪哇犀牛</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5247" class="ax_default" data-left="240" data-top="301" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5248" class="ax_default _默认样式">
            <img id="u5248_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5248_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 印度黑羚</span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5249" class="ax_default _默认样式">
        <div id="u5249_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5250" class="ax_default _默认样式">
        <div id="u5250_div" class=""></div>
        <div id="u5250_text" class="text ">
          <p><span>动态单选框</span></p>
        </div>
      </div>

      <!-- 单选框 (Repeater) -->
      <div id="u5251" class="ax_default" data-label="单选框">
        <script id="u5251_script" type="axure-repeater-template" data-label="单选框">

          <!-- text (Rectangle) -->
          <div id="u5252" class="ax_default _默认样式 u5252" data-label="text">
            <div id="u5252_div" class="u5252_div"></div>
            <div id="u5252_text" class="text u5252_text">
              <p><span>单选框</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5253" class="ax_default _默认样式 u5253" data-label="单选图标" selectiongroup="单选框1">
            <img id="u5253_img" class="img u5253_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5253_text" class="text u5253_text">
              <p><span></span></p>
            </div>
          </div>
        </script>
        <div id="u5251-1" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5252-1" class="ax_default _默认样式 u5252" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5252-1_div" class="u5252_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5252-1_text" class="text u5252_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>金斑蝶</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5253-1" class="ax_default _默认样式 u5253" data-label="单选图标" selectiongroup="单选框1" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5253-1_img" class="img u5253_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5253-1_text" class="text u5253_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span></span></p>
            </div>
          </div>
        </div>
        <div id="u5251-2" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5252-2" class="ax_default _默认样式 u5252" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5252-2_div" class="u5252_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5252-2_text" class="text u5252_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>爪哇犀牛</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5253-2" class="ax_default _默认样式 u5253" data-label="单选图标" selectiongroup="单选框1" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5253-2_img" class="img u5253_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5253-2_text" class="text u5253_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span></span></p>
            </div>
          </div>
        </div>
        <div id="u5251-3" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5252-3" class="ax_default _默认样式 u5252" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5252-3_div" class="u5252_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5252-3_text" class="text u5252_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>印度黑羚</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5253-3" class="ax_default _默认样式 u5253" data-label="单选图标" selectiongroup="单选框1" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5253-3_img" class="img u5253_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5253-3_text" class="text u5253_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span></span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5254" class="ax_default _默认样式">
        <div id="u5254_div" class=""></div>
      </div>

      <!-- 单选框 (Repeater) -->
      <div id="u5255" class="ax_default" data-label="单选框">
        <script id="u5255_script" type="axure-repeater-template" data-label="单选框">

          <!-- text (Rectangle) -->
          <div id="u5256" class="ax_default _默认样式 u5256" data-label="text">
            <div id="u5256_div" class="u5256_div"></div>
            <div id="u5256_text" class="text u5256_text">
              <p><span>单选框</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5257" class="ax_default _默认样式 u5257" data-label="单选图标" selectiongroup="单选框2">
            <img id="u5257_img" class="img u5257_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5257_text" class="text u5257_text">
              <p><span></span></p>
            </div>
          </div>
        </script>
        <div id="u5255-1" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5256-1" class="ax_default _默认样式 u5256" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5256-1_div" class="u5256_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5256-1_text" class="text u5256_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>金斑蝶</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5257-1" class="ax_default _默认样式 u5257" data-label="单选图标" selectiongroup="单选框2" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5257-1_img" class="img u5257_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5257-1_text" class="text u5257_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span></span></p>
            </div>
          </div>
        </div>
        <div id="u5255-2" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5256-2" class="ax_default _默认样式 u5256" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5256-2_div" class="u5256_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5256-2_text" class="text u5256_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>爪哇犀牛</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5257-2" class="ax_default _默认样式 u5257" data-label="单选图标" selectiongroup="单选框2" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5257-2_img" class="img u5257_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5257-2_text" class="text u5257_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span></span></p>
            </div>
          </div>
        </div>
        <div id="u5255-3" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5256-3" class="ax_default _默认样式 u5256" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5256-3_div" class="u5256_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5256-3_text" class="text u5256_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>印度黑羚</span></p>
            </div>
          </div>

          <!-- 单选图标 (Rectangle) -->
          <div id="u5257-3" class="ax_default _默认样式 u5257" data-label="单选图标" selectiongroup="单选框2" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5257-3_img" class="img u5257_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5257-3_text" class="text u5257_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span></span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5258" class="ax_default _默认样式">
        <div id="u5258_div" class=""></div>
        <div id="u5258_text" class="text ">
          <p><span>竖排样式</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5259" class="ax_default" data-left="604" data-top="293" data-width="100" data-height="120">

        <!-- Unnamed (Group) -->
        <div id="u5260" class="ax_default" data-left="604" data-top="293" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5261" class="ax_default _默认样式">
            <img id="u5261_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5261_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 金斑蝶</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5262" class="ax_default" data-left="604" data-top="333" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5263" class="ax_default _默认样式">
            <img id="u5263_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5263_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 爪哇犀牛</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5264" class="ax_default" data-left="604" data-top="373" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5265" class="ax_default _默认样式">
            <img id="u5265_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5265_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 印度黑羚</span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5266" class="ax_default _默认样式">
        <div id="u5266_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5267" class="ax_default _默认样式">
        <div id="u5267_div" class=""></div>
        <div id="u5267_text" class="text ">
          <p><span>状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5268" class="ax_default" data-left="600" data-top="517" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5269" class="ax_default _默认样式">
          <img id="u5269_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5269_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 默认效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5270" class="ax_default" data-left="600" data-top="557" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5271" class="ax_default _默认样式">
          <img id="u5271_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5271_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 悬停效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5272" class="ax_default" data-left="600" data-top="597" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5273" class="ax_default _默认样式">
          <img id="u5273_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5273_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 选中效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5274" class="ax_default" data-left="860" data-top="517" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5275" class="ax_default _默认样式">
          <img id="u5275_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5275_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 禁用效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5276" class="ax_default" data-left="860" data-top="557" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5277" class="ax_default _默认样式">
          <img id="u5277_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5277_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 选中禁用</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5278" class="ax_default _默认样式">
        <div id="u5278_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5279" class="ax_default _默认样式">
        <div id="u5279_div" class=""></div>
        <div id="u5279_text" class="text ">
          <p><span>独立使用</span></p>
        </div>
      </div>

      <!-- 独立复选框 (Group) -->
      <div id="u5280" class="ax_default" data-label="独立复选框" data-left="40" data-top="626" data-width="289" data-height="40">

        <!-- text (Rectangle) -->
        <div id="u5281" class="ax_default _默认样式" data-label="text">
          <div id="u5281_div" class=""></div>
          <div id="u5281_text" class="text ">
            <p><span style="color:#999999;">勾选同意《</span><a id="u5282" class="link"><span>用户服务协议</span></a><span style="color:#999999;">》</span></p>
          </div>
        </div>

        <!-- 单选图标 (Rectangle) -->
        <div id="u5283" class="ax_default _默认样式" data-label="单选图标" selectiongroup="单选框3">
          <img id="u5283_img" class="img " src="images/单选框_radio/单选图标_u5283.png"/>
          <div id="u5283_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
